<!DOCTYPE html>
<html>
<head>
    <link href="css/bootstrap.min.css" rel="stylesheet" />

    <link href="css/bootstrap-table.min.css" rel="stylesheet" />

    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/rest.js"></script>
    <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
    <script>
        $(document).ready(function () {
            var serviceId = getQueryStringValue("serviceId");
            console.log("TOPOAccor - serviceId : " + serviceId);

            $("#topoContObj").attr('data', 'chartTopo.html?serviceId='+serviceId);
            $("#nfvotopoContObj").attr('data', 'lcm_detail_nfvo_topology.html?serviceId='+serviceId);
        });

        function getQueryStringValue (key) {
            var params = new URLSearchParams(window.location.search.slice(1));
            return params.get(key);
        }
        function acordClick_sdno() {
            $("#topoContObj").show();
            $("#nfvotopoContObj").hide();
        }
        function acordClick_nfvo() {
            $("#nfvotopoContObj").show();
            $("#topoContObj").hide();
        }

    </script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
        body {
            overflow: hidden;
            margin: 15px;
        }
        .panel-heading:hover {
            border: 1px solid #4ac9ff;
            color: #4ac9ff;
        }

        li:hover {
            cursor: pointer;
            color: #4ac9ff;
        }
        #accordion .glyphicon {
            margin-right: 10px;
        }

        .panel-collapse > .list-group .list-group-item:first-child {
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }

        .panel-collapse > .list-group .list-group-item {
            border-width: 1px 0;
        }

        .panel-collapse > .list-group {
            margin-bottom: 0;
        }

        .panel-collapse .list-group-item {
            border-radius: 0;
        }

        .panel-collapse .list-group .list-group {
            margin: 0;
            margin-top: 10px;
        }

        .panel-collapse .list-group-item li.list-group-item {
            margin: 0 -15px;
            border-top: 1px solid #ddd !important;
            border-bottom: 0;
            padding-left: 30px;
        }

        .panel-collapse .list-group-item li.list-group-item:last-child {
            padding-bottom: 0;
        }

        .panel-collapse div.list-group div.list-group {
            margin: 0;
        }

        .panel-collapse div.list-group .list-group a.list-group-item {
            border-top: 1px solid #ddd !important;
            border-bottom: 0;
            padding-left: 30px;
        }

        .panel-collapse .list-group-item li.list-group-item {
            border-top: 1px solid #DDD !important;
        }

        .selected {
            /*background-color: #ddd;*/
            color: #4ac9ff;
        }
        .panel-title>a {
            display: inline-block;
            width: 100%;
        }

    </style>
</head>
<body>

    <div class="row">
        <div class="col-sm-3" style="width: 18%; padding-right: 0;">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a id="sdno" style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" onClick="acordClick_sdno();">
                                SDNO
                            </a>
                        </h4>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a id="nfvo" style="text-decoration:none;" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" onClick="acordClick_nfvo();">
                            NFVO
                        </a>
                    </h4>
                </div>
            </div>
        </div>
        <div class="col-sm-3" style="width: 82%; padding-right: 0;">
            <div class="panel-body" style="padding: 0">
                <object id="topoContObj" data="chartTopo.html" width="100%" height="300" type="text/html">

                </object>
            </div>
            <div class="panel-body" style="padding: 0">
                <object id="nfvotopoContObj" data="lcm_detail_nfvo_topology.html" width="100%" height="300" type="text/html">

                </object>
            </div>
        </div>
    </div>


</body>
</html>